<template>
  <div class="h-100">
      <el-page-header
        @back="goBack"
        :content="this.$store.state.titleName"
        class="f-16 p-20"
      ></el-page-header>

      <div class="p-50 p-t-20 h-100 o-y-auto">


 <div class="f j-e">
    <el-button type="primary" @click="toeditCont('',0)">新增文章</el-button>
    </div>

      <el-table
    :data="tableData"
    type="index"
    v-loading="loading"
    style="width: 100%">
    <el-table-column
      label="文章标题">
      <template slot-scope="scope">
        {{ scope.row.title }}
      </template>
    </el-table-column>
    <el-table-column
      label="序号">
      <template slot-scope="scope">
        <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.ordNmber }}</el-tag>
          </div>
      </template>
    </el-table-column>
    <el-table-column
      label="首页展示">
      <template slot-scope="scope">
        <div slot="reference" class="name-wrapper">
            <el-tag size="medium" v-if="scope.row.isShow">显示</el-tag>
            <p v-else>不展示</p>
          </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          plain
          @click="toeditCont(scope.row.id,1)">编辑</el-button>
        <el-button
          size="mini"
          type="primary"
          plain
          @click="delectArticle(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

    <!-- 分页 -->
    <div class="t-c m-tb-30">
      <el-pagination background layout="prev, pager, next" :total="pageTotal" :page-size="pageSize" @current-change="handleCurrentChange"></el-pagination>
    </div>
     
  </div>





  </div>
</template>
<script>
import { queryArticleList, delectArticle } from "../http/api";
export default {
  name: "editList2_1",
  data() {
    return {
      loading: true,
      tableData: [],
      //分页
      pageTotal: 0,
      pageSize: 15,
      pageNo: 1
    };
  },

  created() {
    this.queryArticleList();
  },
  mounted() {},
  methods: {
    // 查询文章
    queryArticleList() {
      const data = {
        lableId: this.$store.state.columnId,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      };
      queryArticleList(data).then(res => {
        console.log({ 文章列表: res });
        this.tableData = res.data.list;
        this.pageTotal = res.data.totalCount;
        this.loading = false;
      });
    },

    // 删除文章
    delectArticle(id) {
      const data = {
        id: id
      };
      delectArticle(data).then(res => {
        console.log({ 删除文章: res });
        this.queryArticleList();
      });
    },

    // 编辑文章
    toeditCont(id, count) {
      this.$store.commit("setArticleId", id);
      if (count) {
        this.$store.commit("setIsAdd", false);
      } else {
        this.$store.commit("setIsAdd", true);
      }
      this.$router.push({
        path: "../page/editCont"
      });
    },

    // 分页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.queryArticleList();
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

